<template>
	<view class="info_warp">
		<view class="form_box">
			<view class="user_photo_box">
				<image class="photo" src="~@/static/jitai/pic/1200.jpg">
				<view class="name_level">
					<view class="name">云中的枫野</view>
					<view class="level">
						<view class="l_icon level_3"></view>
						市级代理
					</view>
				</view>
			</view>
			<form>
				<u-form-item class="uformitem" labelPosition="left" label="真实姓名" prop="name" label-width="150">
					<input v-model="info.name" placeholder="输入真实姓名" :disabled="true"></input>
				</u-form-item>
				<u-form-item class="uformitem" label="用户性别" labelPosition="left" prop="sex" label-width="150">
					<u-input v-model="info.sex" type="select" @click="sexShow = true"/>
				</u-form-item>
				<u-action-sheet :list="sexList" v-model="sexShow" @click="actionSheetCallback"></u-action-sheet>
				<u-form-item class="uformitem" labelPosition="left" label="用户昵称" prop="nickname" label-width="150">
					<input v-model="info.nickname" placeholder="输入用户昵称" :disabled="true"></input>
				</u-form-item>
				<u-form-item class="uformitem" labelPosition="left" label="手机号码" prop="mobile" label-width="150">
					<input v-model="info.mobile" placeholder="输入手机号码" :disabled="true"></input>
				</u-form-item>
				<u-form-item class="uformitem" labelPosition="left" label="邀请编码" prop="sharing_code" label-width="150">
					<input v-model="info.sharing_code" :disabled="true"></input>
					<u-button slot="right" shape="circle" type="warning" size="mini">复制邀请码</u-button>
				</u-form-item>
				
				<view class="submitBtns">
					<u-button type="success" @click="saveadd" shape="circle">提交修改</u-button>
				</view>
			</form>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sexShow: false,
				info:{
					name: '',
					nickname: '',
					sex: '',
					mobile: '',
					sharing_code: 'ac56bgi'
				},
				sexList: [
					{
						text: '男士'
					},
					{
						text: '女士'
					},
					{
						text: '保密'
					}
				]
			};
		},
		methods: {
			actionSheetCallback(index) {
				this.info.sex = this.sexList[index].text;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f1f1f1;
	}
	.user_photo_box {
		width: 100%;
		height: 240rpx;
		padding-top: 100rpx;
		border-bottom: 2rpx solid #eee;
		position: relative;
		text-align: center;
		
		.photo {
			width: 140rpx;
			height: 140rpx;
			border-radius: 140rpx;
			border: 6rpx solid #fff;
			position: absolute;
			left: 50%;
			top: -40rpx;
			margin-left: -70rpx;
		}
		.name_level
		{
			width: auto;
			
			.name {
				font-size: 34rpx;
				padding: 8rpx 0;
			}			
			.level {
				width: auto !important;
				display: inline-block;
				margin-top: 8rpx;
				color: #999 !important;
			}
		}
	}
</style>
